<template>
  <div>
    <div>
      <GradeSelect v-model="grade_id" />
      <!--      <el-button type="primary" @click="go()">导出报告</el-button>-->
    </div>
    <StatisticsItem
      title="1、完成情况"
      subtitle=""
      @view="()=>{
        this.$router.push({
          name: 'statistics-ranking-complete'
        })
      }"
    >
      <div slot="graph" v-loading="loadingComposite">
        <CirclePie ref="composite" cid="1" :data="composite" />
      </div>
    </StatisticsItem>
    <StatisticsItem
      title="2、目标院校"
      subtitle=""
      @view="()=>{
        this.$router.push({
          name: 'statistics-ranking-academy'
        })
      }"
    >
      <div slot="graph">
        <BarYCategoryStack cid="1" :y-data="worth" name="职业价值观测试" />
        <BarYCategoryStack cid="2" :y-data="character" name="MBTI性格测试" />
        <BarYCategoryStack cid="3" :y-data="intelligence" name="多元智能测试" />
        <BarYCategoryStack cid="4" :y-data="grown" name="成长环境测试" />
        <BarYCategoryStack cid="5" :y-data="interest" name="职业兴趣测试" />
      </div>
    </StatisticsItem>
    <StatisticsItem
      title="3、目标专业"
      subtitle=""
      @view="()=>{
        this.$router.push({
          name: 'statistics-ranking-major'
        })
      }"
    >
      <div slot="graph">
        <LinearGradientBar cid="2" :data="LinearGradientData" :opacity="0.7" />
      </div>
    </StatisticsItem>
    <StatisticsItem
      title="4、升学途径占比"
      subtitle=""
      @view="()=>{
        this.$router.push({
          name: 'statistics-cranking-entrance'
        })
      }"
    >
      <div slot="graph" v-loading="loadingComposite">
        <CirclePie ref="composite" cid="1" :data="composite" />
      </div>
    </StatisticsItem>
    <StatisticsItem
      title="5、各科目成绩策略占比"
      subtitle=""
      @view="()=>{
        this.$router.push({
          name: 'statistics-ranking-strategy'
        })
      }"
    >
      <div slot="graph" v-loading="loadingComposite">
        <CirclePie ref="composite" cid="1" :data="composite" />
      </div>
    </StatisticsItem>
  </div>
</template>

<style scoped>
  h2>span {
    color: #8c939d;
    font-size: 12px;
  }
</style>

<script>
// import LineChart from '../../components/Chart/line'
// import RadarChart from '../../components/Chart/radar'
// import PieChart from '../../components/Chart/pie'
import CirclePie from '../../components/Chart/CirclePie'
import BarYCategoryStack from '../../components/Chart/BarYCategoryStack'
import LinearGradientBar from '../../components/Chart/LinearGradientBar'
import StatisticsItem from './components/statistics-item'
import GradeSelect from './components/grade-select'
import { getComposite } from '../../api/statistics'

export default {
  components: {
    // LineChart: LineChart,
    // RadarChart: RadarChart,
    LinearGradientBar: LinearGradientBar,
    GradeSelect: GradeSelect,
    CirclePie: CirclePie,
    StatisticsItem: StatisticsItem,
    BarYCategoryStack: BarYCategoryStack
    // PieChart: PieChart
  },
  data() {
    return {
      loadingComposite: true,
      LinearGradientData: [
        {
          value: 1,
          label: '公共管理类'
        },
        {
          value: 2,
          label: '公共管理类1'
        },
        {
          value: 3,
          label: '公共管理类2'
        },
        {
          value: 4,
          label: '公共管理类3'
        },
        {
          value: 5,
          label: '公共管理类4'
        }
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      grade_id: '1',
      class_id: '',
      composite: [],
      interest: [],
      worth: [],
      intelligence: [],
      grown: [],
      character: []
    }
  },
  mounted() {
    this.getComposite()
  },
  methods: {
    getComposite() {
      this.loadingComposite = false
      getComposite({}).then((res) => {
        // console.log(res)
        this.composite = res.composite
        // this.character = res.character
        // this.interest = res.interest
        // this.worth = res.worth
        // this.intelligence = res.intelligence
        // this.grown = res.grown
        // this.$refs['composite'].initCharts()
      }).finally(() => {
        this.loadingComposite = false
      })
    },
    go() {
      this.$router.push('/statistics/career/complex')
    }
  }
}
</script>
